<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useAppStore } from '@/store/modules/app';
import type { XxlJobChartInfo } from '@/service/api';
import { fetchXxlJobChartInfo } from '@/service/api';
import CardData from './modules/card-data.vue';
import LineChart from './modules/line-chart.vue';
import PieChart from './modules/pie-chart.vue';
const appStore = useAppStore();

const gap = computed(() => (appStore.isMobile ? 0 : 16));

const chartData = ref<XxlJobChartInfo>({
  executorCount: 0,
  triggerCountFailTotal: 0,
  triggerCountSucTotal: 0,
  triggerCountRunningTotal: 0,
  triggerDayList: [],
  triggerDayCountRunningList: [],
  triggerDayCountFailList: [],
  triggerDayCountSucList: []
});

const getXxlJobChartInfo = async () => {
  const { data } = await fetchXxlJobChartInfo();
  if (data) {
    chartData.value = data;
  }
};

getXxlJobChartInfo();
</script>

<template>
  <NSpace vertical :size="16">
    <!-- 数据卡片 -->
    <CardData :chart-data="chartData" />
    <!-- 折线图和饼图 -->
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:14">
        <NCard :bordered="false" class="card-wrapper">
          <LineChart :chart-data="chartData" />
        </NCard>
      </NGi>
      <NGi span="24 s:24 m:10">
        <NCard :bordered="false" class="card-wrapper">
          <PieChart :chart-data="chartData" />
        </NCard>
      </NGi>
    </NGrid>
    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
      <NGi span="24 s:24 m:14">
        <!-- <ProjectNews /> -->
      </NGi>
      <NGi span="24 s:24 m:10">
        <!-- <CreativityBanner /> -->
      </NGi>
    </NGrid>
  </NSpace>
</template>

<style scoped></style>
